import React from 'react'
// 1、引入createRef函数（作用是创建ref对象）
import { createRef } from 'react'
export default class App extends React.Component {
  // 非受控组件：借助于ref，使用原生DOM的方式来获取表单元素的值

  // 2、调用函数 创建一个ref对象
  textRef = createRef()
  handleClick = () => {
    //   4、使用ref,比如说：拿到input dom元素、或者它里面的值
    //this.textRef.current是拿到dom元素
    // this.textRef.current.value拿到的是输入框中的值
    console.log(this.textRef.current)
    console.log(this.textRef.current.value)
  }
  render() {
    return (
      <>
        {/* 3、将创建好的ref跟当前表单元素绑定到一块 */}
        <input ref={this.textRef} type="text" />
        <button onClick={this.handleClick}>点击我拿到输入框中的值</button>
      </>
    )
  }
}
